import { useAppContext } from "@/components/AppContext"
import Markdown from "@/components/common/Markdown"
import { ActionType } from "@/reducers/AppReducer"
import React, {useEffect, useState} from "react"
import { SiOpenai } from "react-icons/si"
import {chatMessageByListUsingPost} from "@/services/maple/aiCharController";
import {useModel} from "@@/exports";
import {Avatar} from "antd";

export default function MessageList() {
  const {
    state: { messageList, streamingId, selectedChat },
    dispatch
  } = useAppContext()
  const initSearchParams = {
    chatId: 'gpt-3.5-turbo',
  };
  const { initialState } = useModel('@@initialState');
  const { currentUser } = initialState ?? {};
  const [searchParams, setSearchParams] = useState<API.AiChatQueryRequest>({ ...initSearchParams });
  async function getData(chatId: string) {
    setSearchParams({
      ...searchParams,
      chatId: chatId,
    })
    const res = await chatMessageByListUsingPost(searchParams)
    if (res.data) {
        dispatch({
          type: ActionType.UPDATE,
          field: "messageList",
          value: res.data
        })
    }
  }

  useEffect(() => {
    getData("gpt-3.5-turbo")
  }, [selectedChat])

  return (
    <div className='w-full pt-10 pb-48 dark:text-gray-300'>
      <ul>
        {messageList.map((message) => {
          // const isUser = message.role === "user"
          return (
            <div key={null}>
              <li
                key={message.id}
                className={`${
                  "bg-white dark:bg-gray-800 "
                }`}
              >
                <div className='w-full max-w-4xl mx-3rem flex space-x-6 px-4 py-6 text-lg'>
                  <div className='text-3xl leading-[1]'>
                    {<Avatar src={currentUser && currentUser.userAvatar} />}
                  </div>
                  <div className='flex-1'>
                    <Markdown>{`${message.message}${
                      ""
                    }`}</Markdown>
                  </div>
                </div>
              </li>
              <li
                key={message.id}
                className={`${
                  // isUser
                  //   ? "bg-white dark:bg-gray-800 :
                  "bg-gray-50 dark:bg-gray-700"
                }`}
              >
                <div className='w-full max-w-4xl mx-3rem flex space-x-6 px-4 py-6 text-lg'>
                  <div className='text-3xl leading-[1]'>
                    {<SiOpenai/>}
                  </div>
                  <div className='flex-1'>
                    <Markdown>{`${message.genResult}${
                      false ? "▍" : ""
                    }`}</Markdown>
                  </div>
                </div>
              </li>
            </div>
          )
        })}
      </ul>
    </div>
  )
}
